<template>
    <view class="score-page">
        <image class="score-page__bg" src="/static/images/bg/score.png" mode=""></image>
        <view class="score-page__button-group">
            <view class="score-page__button" v-for="item in 5" :key="item.id" @click="onClick(item)">
                <image class="score-page__button-image" :src="`/static/images/btn/score_${item}.png`"></image>
                <view class="score-page__button-label">{{item.name}}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    methods: {
        onClick(item) {
            this.$store.commit('saveScore', item);
            uni.navigateTo({
                url: `../over/over?data=${this.$store.getters.data}`,
            });
        },
    },
}
</script>

<style lang="scss">
.score-page {
    &__bg {
        width: 100vw;
        height: imageSize(100vw, 750, 1445);
    }
    &__button-group {
        position: absolute;
        top: 45vw;
    }
    &__button {
        text-align: center;
        position: relative;
        float: left;
    }
    &__button-image {
        width: 100vw;
        height: imageSize(100vw, 724, 143);
    }
    &__button-label {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 35upx;
        font-weight: bolder;
        color: #124a8e;
    }
}
</style>